<template>
  <el-dialog v-model="dialogVisible" title="提示栏" width="500">
    <span>{{ tipItem.tip }}</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false" icon="CloseBold">取消</el-button>
        <el-button :type="judgNumber" @click="confirmBtn" icon="Select"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'

const dialogVisible = ref(false)

const tipItem = ref({
  id: null,
  tip: ''
})

const emits = defineEmits(['handler-confirm'])
const dataItme = ref({})

const open = (item) => {
  console.log('传递数据了', item)
  if (item.type === 'add-item') {
    tipItem.value.tip = '确定要添加这个数据吗'
    tipItem.value.id = 1
    console.log('1----', item.data)
  } else if (item.type === 'update') {
    tipItem.value.id = 2
    tipItem.value.tip = '确定要修改这个数据吗'
    console.log('2----', item.data)
  } else if (item.type === 'remove') {
    tipItem.value.id = 3
    tipItem.value.tip = '确定要删除这个数据吗'
    console.log('3----', item.data)
  } else if (item.type === 'handler-update') {
    tipItem.value.id = 4
    tipItem.value.tip = '确定要修改这些数据吗'
    console.log('4----', item.data)
  } else if (item.type === 'hangdler-delete') {
    tipItem.value.id = 5
    tipItem.value.tip = '确定要删除这些数据吗'
    console.log('5----', item.data)
  }
  dataItme.value = item
  dialogVisible.value = true
}

const confirmBtn = () => {
  dialogVisible.value = false
  emits('handler-confirm', {
    type: tipItem.value.id,
    data: dataItme.value
  })
}

const judgNumber = computed(() => {
  if (tipItem.value.id === 1) {
    return 'primary'
  } else if (tipItem.value.id === 2 || tipItem.value.id === 4) {
    return 'success'
  } else if (tipItem.value.id === 3 || tipItem.value.id === 5) {
    return 'danger'
  }
  return 'default'
})

defineExpose({
  open
})
</script>
